<template>
  <div class="lf-html-wrapper">
    <div class="prefix-icon">
      <Icon size="24" color="#07C160"><CaretForwardCircleSharp /></Icon>
    </div>
    <div class="title">{{ name }}</div>
    <div class="suffix-icon">
      <Icon size="24" color="#07C160"><ArrowForwardCircleOutline /></Icon>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { CaretForwardCircleSharp, ArrowForwardCircleOutline } from '@vicons/ionicons5'
import { Icon } from '@vicons/utils'

export default defineComponent({
  name: 'StartHtml',
  components: { CaretForwardCircleSharp, ArrowForwardCircleOutline, Icon },
  props: {
    name: {
      type: String,
      default: ''
    },
    graphModel: {
      type: Object,
      default: () => ({})
    }
  },
  setup: (props, context) => {
    const { emit } = context
    const title = ref<string>('审批节点')

    props.graphModel.eventCenter.on('node:click', (el) => {
      console.log(el)
    })

    const changeData = () => {
      title.value = '标题hello-world'
      emit('changeData', title.value)
    }
    return {
      title,
      changeData
    }
  }
})
</script>

<style scoped>
.lf-html-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 43px;
  box-sizing: border-box;
  padding: 0 10px;
  width: 170px;
  height: 43px;
  position: relative;
  top: 5px;
  left: 5px;
  box-shadow: 0px 3px 5px 1px #e0e0e0;
}
.lf-html-wrapper .title {
  margin-left: 10px;
  flex: 1;
  text-align: left;
}
.lf-html-wrapper .prefix-icon {
  display: flex;
}
.lf-html-wrapper .suffix-icon {
  display: flex;
}

.active {
  box-shadow: inset 0px 0px 5px 0px #f00;
}
</style>
